<template>
	<view>
		<popup ref="alter" position="center">
			<view class="login1User">
				<view class="space120 pos flex_center flex_items">
					<view class="f40 c0 bold">取消报名</view>
					<image @click="close" class="loginUser_close" src="../../images/close.png"></image>
				</view>
				<view class="p30 box_b">
					<view class="edit_inpBox flex_between flex_items">
						<input v-model="reason" class="edit_inpt plr20 flex_start flex_items box_b f30"
							placeholder="请输入原因" placeholder-class="c9" />
					</view>

					<view @click="save" v-if="isClick" class="edit_btn flex_center flex_items f32 cf">确定</view>
					<view v-if="!isClick" class="edit_btn flex_center flex_items bgccc">
						<view class="loading spin"></view>
						<view class="f32 cf ml30 pl10">确定</view>
					</view>
				</view>
			</view>
		</popup>
	</view>
</template>

<script>
	let common = getApp().globalData.commonFun;
	let util = getApp().globalData.utilFun;
	import popup from '@/components/popup/popup.vue';
	export default {
		components: {
			popup
		},
		data() {
			return {
				imghttp: uni.getStorageSync('imghttp'),
				detail: {},
				reason: "",
				isClick: true,
			};
		},

		created() {
			// let that = this;
			// setTimeout((rs) => {
			// 	that.$refs.alter.show();
			// }, 2000)
		},
		methods: {
			show(res) {
				this.isClick = true;
				this.reason = "";
				this.detail = res;
				this.$refs.alter.show();
			},
			close() {
				this.$refs.alter.hide();
			},
			async save() {
				if (!this.isClick) return;

				if (this.reason == "") {
					common.showTimeToast('请输入原因', 2000);
					return;
				}

				let val = {
					id: this.detail.id,
					statusid: 5,
					reason: this.reason,
				}
				let url = 'arts/edit';
				common.showLoading("...");
				this.isClick = false;
				let res = await util.httpRequest(url, val, "POST");
				common.hideLoading();
				this.isClickSendBtn = true;
				this.isClick = true;
				if (res.result == "fail") {
					common.showTimeToast(res.msg);
					return;
				}
				common.showTimeToast("取消成功");
				this.close();
				this.$emit("cancel2Box", val)
			},
		}
	};
</script>

<style scoped>
	.login1User {
		width: 630rpx;
		background: #ffffff;
		border-radius: 30rpx;
		margin: 0 auto;
	}

	.loginUser_close {
		width: 24rpx;
		height: 24rpx;
		margin: 30rpx;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 10;
	}

	.radio {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}

	.edit_inpBox {
		width: 570rpx;
		height: 100rpx;
		border-radius: 10rpx;
		margin-top: 30rpx;
		background: #f8f8f8;
	}

	.edit_inpt {
		width: 100%;
		height: 100rpx;
	}

	.edit_btn {
		width: 570rpx;
		height: 90rpx;
		margin: 60rpx auto;
		background: #15a183;
		border-radius: 45rpx;
	}
</style>